<section class="content-header">
    <h1>
        {{title}}
    </h1>
</section>

<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">系统菜单权限分配</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <div class="col-md-12">
                        <div class="col-md-4 border-line">
                            <div>
                                <input type="button" class="btn btn-success" (click)="popupVisible = true" value="添加菜单">
                                <input type="button" class="btn btn-info" (click)="editMenu()" value="编辑菜单">
                                <input type="button" class="btn btn-danger" (click)="delMenu()" value="删除菜单">
                            </div>
                            <div>
                                <dx-tree-view id="simple-treeview" [items]="menus" dataStructure="plain" parentIdExpr="categoryId" keyExpr="id" displayExpr="name"
                                    [width]="300" (onItemClick)="selectItem($event)">
                                </dx-tree-view>
                            </div>
                        </div>
                        <div class="col-md-1">

                        </div>
                        <div class="col-md-4 border-line">
                            <h4>当前节点:{{currentItem.name}}</h4>
                            <div class="modal-body">
                                <ul>
                                    <li *ngFor="let role of roleList">
                                        <input type="checkbox" [checked]="roleIsChecked(role)" (click)="bindRoleToMenu(role)">                                        {{role.name}}
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-3">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <dx-popup [width]="660" [height]="540" [showTitle]="true" [title]="dialogTitle" [dragEnabled]="false" [closeOnOutsideClick]="true"
        contentTemplate="popoverContent" [(visible)]="popupVisible">
        <div *dxTemplate="let data of 'popoverContent'" class="form">
            <div class="modal-body">
                <h4>添加在【{{currentItem.name}}】下</h4>
                <form>
                    <div class="form-group">
                        <label for="exampleInputEmail1">菜单ID(不能重复)</label>
                        <input type="email" class="form-control" name="menuItem.id" [(ngModel)]="menuItem.id" id="exampleInputEmail1" placeholder="menu id">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">菜单名称</label>
                        <input type="email" class="form-control" name="menuItem.name" [(ngModel)]="menuItem.name" id="exampleInputEmail1" placeholder="menu name">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">路由地址(如果是根节点可不填)</label>
                        <input type="email" class="form-control" name="menuItem.href" [(ngModel)]="menuItem.href" id="exampleInputPassword1" placeholder="menun router">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword2">排序级别</label>
                        <input type="email" class="form-control" name="menuItem.sort" [(ngModel)]="menuItem.sort" id="exampleInputPassword2" placeholder="sort level">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword2">菜单图标</label>
                        <input type="email" class="form-control" name="menuItem.icon" [(ngModel)]="menuItem.icon" id="exampleInputPassword2" placeholder="icon">
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="menuItem.isShow" [name]="value" [checked]="menuItem.isShow == 1" [value]="menuItem.isShow" (click)="setValue(menuItem.isShow,1)">                            是否显示
                        </label>
                    </div>
                    <button type="submit" class="btn btn-default pull-right" (click)="saveMenuItem()">保存</button>
                </form>
                <button class="btn btn-default pull-left" (click)="canceLAddMenu()">取消</button>

            </div>
        </div>

    </dx-popup>

    <dx-popup [width]="660" [height]="580" [showTitle]="true" [title]="dialogTitle" [dragEnabled]="false" [closeOnOutsideClick]="true"
        contentTemplate="popoverContent" [(visible)]="editDialogVisible">
        <div *dxTemplate="let data of 'popoverContent'" class="form">
            <div class="modal-body">
                <h4>修改【{{currentMenuItem.name}}】</h4>
                <form>
                    <div class="form-group">
                        <label for="exampleInputEmail1">菜单ID(不能重复)</label>
                        <input type="email" class="form-control" disabled="disabled" name="currentMenuItem.id" [(ngModel)]="currentMenuItem.id" id="exampleInputEmail1"
                            placeholder="menu id">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">菜单名称</label>
                        <input type="email" class="form-control" name="currentMenuItem.name" [(ngModel)]="currentMenuItem.name" id="exampleInputEmail1"
                            placeholder="menu name">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">路由地址(如果是根节点可不填)</label>
                        <input type="email" class="form-control" name="currentMenuItem.href" [(ngModel)]="currentMenuItem.href" id="exampleInputPassword1"
                            placeholder="menun router">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword2">排序级别</label>
                        <input type="email" class="form-control" name="currentMenuItem.sort" [(ngModel)]="currentMenuItem.sort" id="exampleInputPassword2"
                            placeholder="sort level">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword2">菜单图标</label>
                        <input type="email" class="form-control" name="currentMenuItem.icon" [(ngModel)]="currentMenuItem.icon" id="exampleInputPassword2"
                            placeholder="icon">
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="currentMenuItem.isShow" [name]="value" [checked]="currentMenuItem.isShow == 1" [value]="currentMenuItem.isShow"
                                (click)="setValue(currentMenuItem.isShow,2)"> 是否显示
                        </label>
                    </div>
                    <button type="submit" class="btn btn-default pull-right" (click)="saveEditMenuItem()">保存</button>
                </form>
                <button class="btn btn-default pull-left" (click)="canceLAddMenu()">取消</button>

            </div>
        </div>

    </dx-popup>


</section>